import { MciButton, MciSubCard, MciSvgIcon } from '@/components/base';
import { useFormMode } from '@/components/base/Form/mode';
import { useCurrentNode } from '@/hooks/useCurrentNode';
import { ref } from 'vue';
import { ConditionAssignment } from './Condition';

export const Assignment = defineComponent({
  props: {
    edges: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    const conditionAssignmentRef = ref<any>();
    const currentNode = useCurrentNode();
    const formMode = useFormMode();

    const titleRight = () => {
      return (
        <div class="flex pr-12">
          {!props.edges && formMode?.mode === 'edit' && (
            <MciButton onClick={() => conditionAssignmentRef.value.addConditionAssignment()} link>
              <MciSvgIcon width={18} height={18} name="plus" />
              <span class="text-value-14">条件赋值</span>
            </MciButton>
          )}
        </div>
      );
    };

    const content = () => {
      return (
        <div>
            <ConditionAssignment
              noAssignment={props.edges}
              data={currentNode.getCondition() || []}
              onUpdate:data={(data) => {
                currentNode.saveCondition(data);
              }}
              ref={conditionAssignmentRef}
            />
        </div>
      );
    };
    return () => {
      return (
        <MciSubCard title={`${props.edges ? '条件配置' : '规则赋值'}`}>
          {{
            titleRight,
            default: content
          }}
        </MciSubCard>
      );
    };
  }
});
